<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			html{
				perspective: 800px;
			}
			
			.cube{
				width: 200px;
				height: 200px;
				margin: 100px auto;
				/*background-color: #bfa;*/
				/*设置3d变形效果*/
				transform-style: preserve-3d;
				
				animation: rotate 10s 5;
			}
			
			.cube>div{
				width: 200px;
				height: 200px;
				position: absolute;
				/*透明度*/
				opacity: 0.8;
			}
			
			img{
				vertical-align: bottom;
			}
			
			.box1{
				transform: rotateY(90deg) translateZ(100px);
				/* translateZ(100px)如果不写视距会没有反应*/
			}
			
			.box2{
				transform: rotateY(-90deg) translateZ(100px);
			}
			
			.box3{
				transform: rotateX(90deg) translateZ(100px);
			}
			
			.box4{
				transform: rotateX(-90deg) translateZ(100px);
			}
			
			.box5{
				transform: rotateY(0deg) translateZ(100px);
			}
			
			.box6{
				transform: rotateY(180deg) translateZ(100px);
			}
			
			
			@keyframes rotate{
				from{transform:rotateX(0) rotateZ(0) ;}
				to{transform:rotateX(1turn) rotateZ(1turn);}
			}
		</style>
	</head>
	<body>
		<div class="cube">
			<div class="box1">
				<img src="./img/an1.jpg" alt="" />
			</div>
			
			<div class="box2">
				<img src="./img/an2.jpg" alt="" />
			</div>
			
			<div class="box3">
				<img src="./img/an3.jpg" alt="" />
			</div>
			
			<div class="box4">
				<img src="./img/an4.jpg" alt="" />
			</div>
			
			<div class="box5">
				<img src="./img/an5.jpg" alt="" />
			</div>
			
			<div class="box6">
				<img src="./img/an6.jpg" alt="" />
			</div>
		</div>
	</body>
</html>
